import { useDispatch, useSelector } from "react-redux";
import { add, addByPayload, reduce } from "../store/counter/counter.reducer";
import { AppReducerState } from "../store/types/reducer.type";
import Button from "@mui/material/Button";
import { Link } from "react-router-dom";

export function Counter() {
  // use selector to get state from specific module
  const code = useSelector((state: AppReducerState) => state.counter.counter);

  const dispatch = useDispatch();
  return (
    <div>
      <div>
        <span>Counter</span>

        <Button
          variant="contained"
          aria-label="Increment value"
          onClick={() => dispatch(add())}
        >
          Add
        </Button>

        <Button
          variant="outlined"
          aria-label="Decrement value"
          onClick={() => dispatch(reduce())}
        >
          Reduce
        </Button>

        <Button
          variant="outlined"
          aria-label="Decrement value"
          onClick={() => dispatch(addByPayload(5))}
        >
          Add 5
        </Button>
      </div>

      <div>
        <span>{code}</span>
      </div>

      <div>
        <Link to="/about">Aboout</Link>
      </div>

      <div>
        <Link to="/welcome">Welcome</Link>
      </div>
    </div>
  );
}
